<template>
  <Card class="!m-10px">
    <Table
      :columns="columns"
      :dataSource="skuList"
      bordered
      :pagination="{
        // 当前页码
        current,
        // 每页条数
        pageSize,
        // 总数
        total,
        // 每页条数的可选项
        pageSizeOptions: ['3', '6', '9', '12'],
        // 显示快速跳转页码
        showQuickJumper: true,
        // 显示修改每页条数
        showSizeChanger: true,
        // 显示总数
        showTotal: (total) => `总共 ${total} 条`,
        onChange: getSkuList,
        onShowSizeChange: getSkuList,
      }"
      :loading="loading"
      :scroll="{ x: 1200 }"
    >
      <template #bodyCell="{ index, column, record, text }">
        <!-- 
          默认列渲染的是dataIndex对应数据的值
          如果指定了下列插槽语法：就会渲染下面的内容
         -->
        <template v-if="column.dataIndex === 'index'"> {{ index + 1 }} </template>
        <template v-if="column.dataIndex === 'skuDefaultImg'">
          <img :src="text" :alt="record.skuName" class="w-200px h-100px" />
        </template>
        <template v-if="column.dataIndex === 'operator'">
          <Button class="mr-10px">
            <template #icon><EditOutlined /></template>
          </Button>
          <Button class="mr-10px" @click="setIsSale(record)">
            <template #icon>
              <ArrowUpOutlined v-if="record.isSale === 0" />
              <ArrowDownOutlined v-else />
            </template>
          </Button>
          <Button danger>
            <template #icon><DeleteOutlined /></template>
          </Button>
        </template>
      </template>
    </Table>
  </Card>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'Sku',
  });
</script>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { Card, Table, Button, message } from 'ant-design-vue';
  import {
    EditOutlined,
    DeleteOutlined,
    ArrowUpOutlined,
    ArrowDownOutlined,
  } from '@ant-design/icons-vue';
  import { SkuListModel, SkuModel } from '/@/api/product/model/skuModel';
  import { getSkuListApi, onSaleApi, cancelSaleApi } from '/@/api/product/sku';

  const columns = [
    {
      title: '序号',
      className: '!text-center',
      dataIndex: 'index',
      fixed: 'left',
      width: 70,
    },
    {
      title: 'Sku名称',
      dataIndex: 'skuName',
      width: 250,
    },
    {
      title: 'Sku描述',
      dataIndex: 'skuDesc',
      width: 250,
    },
    {
      title: 'Sku价格',
      dataIndex: 'price',
      width: 150,
    },
    {
      title: 'Sku重量',
      dataIndex: 'weight',
      width: 150,
    },
    {
      title: 'Sku图片',
      dataIndex: 'skuDefaultImg',
      width: 200,
    },
    {
      title: '操作',
      dataIndex: 'operator',
      width: 150,
    },
  ];

  const skuList = ref<SkuListModel>([]);
  const current = ref<number>(1);
  const pageSize = ref<number>(3);
  const total = ref<number>(0);
  const loading = ref<boolean>(false);

  const getSkuList = async (page: number, limit: number) => {
    loading.value = true;
    const res = await getSkuListApi(page, limit);
    skuList.value = res.records;
    total.value = res.total;
    current.value = page;
    pageSize.value = limit;
    message.success('获取sku列表成功');
    loading.value = false;
  };

  onMounted(() => {
    getSkuList(current.value, pageSize.value);
  });

  const setIsSale = async (sku: SkuModel) => {
    if (sku.isSale === 1) {
      await cancelSaleApi(sku.id as number);
    } else {
      await onSaleApi(sku.id as number);
    }
    message.success(`商品${sku.isSale === 1 ? '下架' : '上架'}成功`);
    getSkuList(current.value, pageSize.value);
  };
</script>
